/**
* @description: 1px for mobile device,including(top, right, bottom, left)
* @params:      @color, @width(default value: #dbdbdb, 1px)
* @eg:          .border-top-1px(#ccc, 2px)
*/
.border-top-1px(@color: #dbdbdb; @width: 1px) {
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: @width;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .border-top-1px:before {
      transform: scaleY(0.33333);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .border-top-1px:before {
      transform: scaleY(0.5);
    }
  }
}
.border-right-1px(@color: #dbdbdb; @width: 1px) {
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: @width;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .border-right-1px:before {
      transform: scaleX(0.33333);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .border-right-1px:before {
      transform: scaleX(0.5);
    }
  }
}
.border-bottom-1px(@color: #dbdbdb; @width: 1px) {
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: @width;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .border-bottom-1px:before {
      transform: scaleY(0.33333);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .border-bottom-1px:before {
      transform: scaleY(0.5);
    }
  }
}
.border-left-1px(@color: #dbdbdb; @width: 1px) {
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: @width;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .border-left-1px:before {
      transform: scaleX(0.33333);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .border-left-1px:before {
      transform: scaleX(0.5);
    }
  }
}
/**
* @description: border-radius
* @params:      @radius
* @eg:          
*/
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
